<template>
  <div id="app">
    <div style="display: flex">
      <!-- 侧边栏 -->
      <SlideBar v-if="!$route.meta.LeftTabHidden" class="slidebar"></SlideBar>
      <div class="box">
        <div class="top" v-if="!$route.meta.LeftTabHidden">
          <header v-show="!$route.meta.LeftTabHidden">
            <div class="logos">
              <img src="./assets/logo2.svg" alt="" style="width: 20rem; margin-right: 10rem" />
              鲸鱼后台系统
            </div>

            <div class="user">
              <div class="chat">
                <span class="iconfont icon-xiaoxi"></span>
                <span>{{ infoCount }}</span>
              </div>
              <span style="margin-left: 20rem;font-size: 11rem;">{{ users || '未登录' }} </span>

              <el-avatar :size="40" class="mr-3"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </div>
          </header>
        </div>
        <div style="background-color: #f7f8f9">
          <router-view></router-view>
        </div>
      </div>
      <Socket @updateParent="handleDataFromChild"></Socket>
    </div>
  </div>
</template>

<script setup>
import SlideBar from './components/SlideBar.vue'
import Socket from './components/Socket/socket.vue'

import { APPinit } from '@/utils/Lxz-axios'
import { getExamine } from '@/utils/jia-axios'
const infoCount = ref(0)
getExamine().then((res) => {
  infoCount.value = res.data.infoCount
  console.log(res.data)
})
const handleDataFromChild = (data) => {
  // 接收子组件传递的数据
  infoCount.value = data;
};

import { ElMessage } from 'element-plus'

import { useRouter } from 'vue-router'

let router = useRouter()

// 初始化页面校验登录状态逻辑
let tokens = localStorage.getItem('token')
if (tokens) {
  APPinit(tokens).then((res) => {
    console.log('res', res)

    if (res.data.initcode == 0) {
      ElMessage.error(`登录态已过期，请重新登录`)
      localStorage.removeItem('token')
      localStorage.removeItem('users')

      router.push('/login')
    } else if (res.data.initcode == 1) {
      ElMessage({
        message: `欢迎回来!管理员`,
        type: 'success',
      })
    }
  })
} else {
  ElMessage.error('请先登录')
  localStorage.removeItem('token')
  localStorage.removeItem('users')

  router.push('/login')
}

// 引入pinia数据
import { storeToRefs } from 'pinia'
import { useCounterStore } from './stores/Lxz.js'
import { ref } from 'vue'

// 获取pinia实例内容
const FilmDataStore = useCounterStore()

// 获取pinia数据使用这种方式
const { users } = storeToRefs(FilmDataStore)

// //引入pinia内的方法
// // const { AddOrders, PayForTheOrder } = FilmDataStore


</script>
<!-- <style>
body, html {
  font-family: 'CustomFont', sans-serif;
}

</style> -->

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  /* Project id 4804949 */
  src: url('//at.alicdn.com/t/c/font_4804949_zvx56fqy0e.woff2?t=1736943108848') format('woff2'),
    url('//at.alicdn.com/t/c/font_4804949_zvx56fqy0e.woff?t=1736943108848') format('woff'),
    url('//at.alicdn.com/t/c/font_4804949_zvx56fqy0e.ttf?t=1736943108848') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xiaoxi:before {
  content: '\e612';
  font-weight: 800;
  font-size: 14rem;
}

#app {
  font-size: 16rem;
  height: 100vh;
  background-color: #f7f8f9;

  .box {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
    position: relative;

    .top {
      height: 60rem;
    }

    header {
      position: fixed;
      z-index: 1000;
      width: 88vw;
      padding: 10rem 15rem;
      background-color: #ffffff;
      margin-bottom: 20rem;
      box-shadow: 3px -1px 8px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: 'CustomFont';

      .logos {
        align-items: center;
        display: flex;

        img {
          width: 20rem;
          margin-right: 10rem;
        }
      }

      .user {
        font-family: 'CustomFont';

        // float: right;
        display: flex;
        align-items: center;
        font-size: 14rem;
        color: #666;

        .chat {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 4rem 0 4rem 6rem;
          margin-top: 1rem;
          border-radius: 20rem;
        }

        .el-avatar {
          margin-right: 10rem;
        }

        span {
          margin-right: 8rem;
        }
      }
    }

    .slidebar {
      overflow: hidden;
    }
  }
}
</style>
